<template>
  <div>
    <!-- 走马灯 -->
    <div>
      <el-carousel :interval="2000" type="card" height="200px">
        <el-carousel-item v-for="(it,index) in guideList" :key="index" :style="{backgroundImage: 'url(' + it.image + ')'}" >
          <h3 class="medium">{{it.name}}</h3>
          <div class="img-loop-list" ></div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 模块分类 -->
    <div class="type-webside">
        <div class="type-single-card" v-for="(it,index) in guideList" :key="index" 
        :style="{backgroundImage: 'url(' + it.image + ')'}">
            {{it.name}}
        </div>
    </div>
  </div>
</template>

<style scoped>
/* 图片轮播 */
.el-carousel__item{

background-repeat: no-repeat;
    background-size:100% 200px;
}
/* 下方引导模块 */
.type-webside{
    width: 100%;
    height: 300px;
    position: relative;
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #fff;
}
.type-single-card{
    width: 24%;
    height: 140px;
    border-radius: 4px;
    margin-left: 10px;
    margin-bottom: 10px;
    /* margin-top: 10px; */
    background-color: green;
    /* background-image: url('../../assets/type/before.jpg'); */
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
/* 走马灯 */
.el-carousel__item h3 {
  color:white;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

<script>
export default {
  data() {
    return {
        guideList:[
            {   
                id:'1',         //ID
                name:'前端',    //名称
                path:'',        // 路径
                icon:'',        // 图标
                image:'http://www.geniusman.top/httpimg/assets/type/before.jpg',       // 图片
                resume:''       // 简介
            },
            {
                 id:'2',         //ID
                name:'后台',    //名称
                path:'',        // 路径
                icon:'',        // 图标
                image:'http://www.geniusman.top/httpimg/assets/type/after.jpg',        // 图片
                resume:''       // 简介
            },
            {
                 id:'3',         //ID
                name:'算法',    //名称
                path:'',        // 路径
                icon:'',        // 图标
                image:'http://www.geniusman.top/httpimg/assets/type/algorithm.jpg',        // 图片
                resume:''       // 简介
            },
            {
                 id:'4',         //ID
                name:'数据库',    //名称
                path:'',        // 路径
                icon:'',        // 图标
                image:'http://www.geniusman.top/httpimg/assets/type/database.jpg',       // 图片
                resume:''       // 简介
            },
            {
                 id:'5',         //ID
                name:'服务器',    //名称
                path:'',        // 路径
                icon:'',        // 图标
                image:'http://www.geniusman.top/httpimg/assets/type/server.jpg',       // 图片
                resume:''       // 简介
            },
            {
                 id:'6',         //ID
                name:'软考',    //名称
                path:'',        // 路径
                icon:'',        // 图标
                image:'http://www.geniusman.top/httpimg/assets/type/softwaretest.png',       // 图片
                resume:''       // 简介
            },
            {
                 id:'7',         //ID
                name:'在线工具',    //名称
                path:'',        // 路径
                icon:'',        // 图标
                image:'http://www.geniusman.top/httpimg/assets/type/onlinetool.JPG',       // 图片
                resume:''       // 简介
            },
            {
                 id:'8',         //ID
                name:'破解工具',    //名称
                path:'',        // 路径
                icon:'',        // 图标
                image:'http://www.geniusman.top/httpimg/assets/type/crackingtool.jpg',       // 图片
                resume:''       // 简介
            },
            
        ]
    };
  },
  methods: {
    
  },
};
</script>